<template>
    <view class="page-all">
        <u-swiper :list="bannerArr" height="280"></u-swiper>
        <view class="list">
            <view v-for="box in menuList" :key="box.appMenuId" class="list-card">
                <view class="card-title">{{ box.appMenuName }}</view>
                <view class="card-box">
                    <view v-for="item in box.children" :key="item.appMenuId" class="card-item">
                        <u-image v-if="item.appMenuUrl" :src="item.appMenuUrl" height="86" width="86">
                            <u-icon name="photo" :size="22"></u-icon>
                        </u-image>
                        <u-icon v-else name="photo" :size="22"></u-icon>
                        <text>{{ item.appMenuName }}</text>
                    </view>
                    <view v-for="item in box.children" :key="item.appMenuId" class="card-item">
                        <u-image v-if="item.appMenuUrl" :src="item.appMenuUrl" height="86" width="86">
                            <u-icon name="photo" :size="22"></u-icon>
                        </u-image>
                        <u-icon v-else name="photo" :size="22"></u-icon>
                        <text>{{ item.appMenuName }}</text>
                    </view>
                    <view v-for="item in box.children" :key="item.appMenuId" class="card-item">
                        <u-image v-if="item.appMenuUrl" :src="item.appMenuUrl" height="86" width="86">
                            <u-icon name="photo" :size="22"></u-icon>
                        </u-image>
                        <u-icon v-else name="photo" :size="22"></u-icon>
                        <text>{{ item.appMenuName }}</text>
                    </view>
                </view>
            </view>
        </view>

        <tabbar />
    </view>
</template>

<script setup lang="ts" name="home">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { getAppRouters } from '@/api/app'

const userStore = useUserStore()
const bannerArr = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
])
const menuList = ref<any[]>([])
const getMenu = () => {
    getAppRouters().then(({ data }) => {
        menuList.value = data
    })
}
onLoad(() => {
    getMenu()
})
</script>

<style lang="scss" scoped>
.page-all {
    padding: 10px;
    min-height: 100vh;
    background-image: linear-gradient(#deecfd, #fafcff 20%);

    .list {
        margin-top: 20px;

        .list-card {
            background: rgba($color: #fff, $alpha: 0.7);
            margin-bottom: 10px;
            border-radius: 8px;

            &:first-child {
                background-image: linear-gradient(#dceefc, #ffffff 30%);
            }

            .card-title {
                padding: 15px 10px 20px 10px;
                font-size: 18px;
                font-weight: 600;
            }

            .card-box {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-start;

                .card-item {
                    text-align: center;
                    width: 25%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    flex-direction: column;
                    padding-bottom: 20px;

                    text {
                        margin-top: 10rpx;
                        font-size: 12px;
                        opacity: 0.7;
                    }
                }
            }
        }
    }
}
</style>
